<template>
	<view class="container" :style="{height:phone_height+'px'}">
		<view class="user-section">
			<view class="bg"></view>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.avatarUrl || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<view v-if="hasLogin">
						<text class="username">{{userInfo.nickName || '游客'}}</text>
					</view>
					<view v-else>
						<view v-for="(value,key) in providerList" :key="key">
							<text class="username" @click="tologin()" >点击登录</text>
						</view>
					</view>
				</view>
				<view class="select_bill">
					<u-cell-item 
					:valueStyle="{fontWeight: 500,'overflow': 'hidden',
								'text-overflow': 'ellipsis',
								'-ms-text-overflow': 'ellipsis',
								'display': 'box',
								'display': '-webkit-box',
								'line-clamp': 1,
								'-webkit-line-clamp': 1,
								'-webkit-box-orient': 'vertical'}" 
					@click="statusChange()" 
					:value="bill_title"
					hover-class="none"
					:border-bottom="border_bottom"
					>
					</u-cell-item>
				</view>
			</view>
			<view class="vip-card-box">
				<view class="card-bg"></view>
				<view class="tit">
					<text class="yticon icon-iLinkapp-"></text>
				</view>
				<text class="e-m"></text>
				<text class="e-b"></text>
			</view>
		</view>
		
		<view class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		>
			<image class="arc" src="/static/arc.png"></image>
			
			<view class="tj-sction">
				<view class="tj-item">
					<text class="num">{{userData.sign_in_day || 0}}</text>
					<text>打卡天数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{userData.all_bill_day || 0}}</text>
					<text>总记账天数</text>
				</view>
				<view class="tj-item">
					<text class="num">{{userData.all_bill_count || 0}}</text>
					<text>总记账笔数</text>
				</view>
			</view>
			
			<view class="user-list">
				<u-cell-group>
					<u-cell-item :titleStyle="{fontWeight: 500}" title="账单设置">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_bill" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					<u-cell-item :titleStyle="{fontWeight: 500}" title="类别设置">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_type" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					<u-cell-item :titleStyle="{fontWeight: 500}" @click="message()" title="记账提醒">
						<image slot="icon" class="u-cell-icon" :src="iconList.user_time" mode="" :lazy-load="lazy_load"></image>
					</u-cell-item>
					
					<button type="default" open-type="feedback" class="list-item">
						<u-cell-item :titleStyle="{fontWeight: 500}" title="建议反馈">
							<image slot="icon" class="u-cell-icon" :src="iconList.user_feedback" mode="" :lazy-load="lazy_load"></image>
						</u-cell-item>
					</button>
				
					<button type="default" open-type="contact" class="list-item">
						<u-cell-item :titleStyle="{fontWeight: 500}" title="联系客服">
							<image slot="icon" class="u-cell-icon" :src="iconList.user_kefu" mode="" :lazy-load="lazy_load"></image>
						</u-cell-item>
					</button>
					
				</u-cell-group>
			</view>
			<view class="share-box">
				<button type="default" open-type="share" class="share-button">推荐给好友</button>
			</view>
			
		</view>
		<u-select @click="select_bill_show = true" :default-value="default_bill_index" mode="single-column" v-model="select_bill_show" :list="bill_list" @confirm="billConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCheckLogin : true,
				providerList: [],
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				
				phone_height: "0",
				scroll_view_height: "100",
				
				border_bottom: false,
				bill_title: "默认账单",
				
				select_bill_show: false,
				default_bill_index: [0],
				bill_list: [
					{
						value: '0',
						label: '默认账单',
						extra: '0'
					}
				],
				lazy_load: true,
				iconList: {
					add_bill_time:'../../static/add_bill_time.png',
					add_bill_type:'../../static/add_bill_type.png',
					add_bill_desc:'../../static/add_bill_desc.png',
					user_bill:'../../static/user_bill.png',
					user_feedback:'../../static/user_feedback.png',
					user_kefu:'../../static/user_kefu.png',
					user_time:'../../static/user_time.png',
					user_type:'../../static/user_type.png'
				}
			}
		},
		methods: {
			share(){
				console.log('非小程序分享')
			},
			// 点击选择账单
			statusChange() {
				this.select_bill_show = !this.select_bill_show;
			},
			// 选择账单回调
			billConfirm(e){
				console.log(e);
			},
			
			message(){
			},
			pickerConfirm(){
				
			}
		},
		onLoad(options){
			// 计算scroll-view高度
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phone_height = res.windowHeight
				}
			})
		},
		onShow() {
		}
	}
</script>

<style lang="scss">
	.container{
		background-color: #f5f5f5;
	}
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 10upx;
	}
	
	.user-section{
		height: 480upx;
		padding: 100upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			//opacity: .7;
			background-color: #FDDC2D;
		}
	}
	.user-info-box{
		height: 180upx;
		display:flex;
		align-items:center;
		position:relative;
		z-index: 1;
		.portrait{
			width: 130upx;
			height: 130upx;
			border:5upx solid #fff;
			border-radius: 50%;
		}
		.username{
			font-size: 30rpx;
			color: $font-color-dark;
			margin-left: 20rpx;
		}
	}
	.vip-card-box{
		display:flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		//background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
		background: linear-gradient(left, rgba(253, 220, 45, 0.7), rgba(253, 220, 45, 0.8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;
		.card-bg{
			position:absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}
		.tit{
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;
			.yticon{
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}
		.e-b{
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}
	.cover-container{
		background-color: #f5f5f5;
		margin-top: -200rpx;
		position:relative;
		padding-bottom: 20rpx;
		.arc{
			position:absolute;
			left: 0;
			top: 120rpx;
			width: 100%;
			height: 36rpx;
		}
	}
	
	.tj-sction{
		@extend %section;
		
		background-color: #FDDC2D;
		.tj-item{
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #7a7a7a;
		}
		.num{
			font-size: 40rpx;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}
	
	.order-section{
		@extend %section;
		padding: 28upx 0;
		margin-top: 20upx;
		.order-item{
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}
		.yticon{
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
		.icon-shouhoutuikuan{
			font-size:44upx;
		}
	}
	
	.user-list{
		margin-top: 30upx;
		background: #fff;
		border-radius:10upx;
		switch{
			transform: scale(0.7,0.7)
		}
	}
	.list-item{
		width: 100%;
		padding: 0rpx;
		background-color: #FFFFFF !important;
		border: initial;
		text-align: initial;
	}
	.list-item::after{
		border: initial;
	}
	.share-box{
		width: 70%;
		margin: auto;
		padding-top: 30rpx;
	}
	.share-button{
		background-color: #FD6A6C !important;
		color: #fff !important;
		font-size: 30rpx !important;
	}
	
	.app-item{
		display: inline-block;
		text-align: center;
	}
	.app-icon-box{
		width: 140rpx;
		height: 140rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	.app-icon{
		width: 110rpx;
		height: 110rpx;
	}
	.app-name{
		font-size: 23rpx;
		width: 150rpx;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap; 
		display: -webkit-box; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.u-cell-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.select_bill{
		margin-left: auto;
		width: 300rpx;
	}
</style>
